<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>π付系统</title>
    <link href="/statics/css/bootstrap.min.css" rel="stylesheet">
    <link href="/statics/css/common.css" rel="stylesheet">
    <link href="/statics/css/user_project_list.css" rel="stylesheet">
</head>
<body>

<div class="nav">
    <img id="go_back" src="/statics/images/go_back_black.png" alt="返回">
    <div>项目列表</div>
</div>

<div class="container">
    <!--普通 、 白金 、 钻石-->
    <div class="row recharge_status">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center"><span class="active">普通项目</span></div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center"><span>黄金项目</span></div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center"><span>白金项目</span></div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center"><span>钻石项目</span></div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center"><span>口腔项目</span></div>
    </div>

    <div id="select_project">
        <div class="clearfix">
            <div class="pull-left active">项目</div>
            <div class="pull-left">商品</div>
            <div class="pull-left">体验券</div>
        </div>
        <div style="height: 0.26666rem;background-color: #f2f2f2"></div>
    </div>

    <!--项目列表 普通-->
    <div class="order_list recharge_status_general active" id="recharge_status_general"></div>

    <!--jollyone商品-->
    <div class="order_list recharge_status_general " id="jollyone_general"></div>

    <!--体验券-->
    <div class="order_list recharge_status_general " id="experience_general"></div>

    <!--项目列表 黄金-->
    <div class="order_list recharge_status_gold" id="recharge_status_gold"></div>

    <!--项目列表 白金-->
    <div class="order_list recharge_status_platina" id="recharge_status_platina"></div>

    <!--项目列表 钻石-->
    <div class="order_list recharge_status_jewel" id="recharge_status_jewel"></div>

    <!--项目列表 钻石-->
    <div class="order_list recharge_status_mouth" id="recharge_status_mouth"></div>

</div>

<!--<div class="footer table">
    <div class="text-center">
        <a href="">
            <div><img src="/statics/images/menu_kq.png" alt=""></div>
            <div>卡券商城</div>
        </a>
    </div>
    <div class="text-center active">
        <a href="">
            <div><img src="/statics/images/menu_wd_dq.png" alt=""></div>
            <div>用户中心</div>
        </a>
    </div>
</div>-->

<!--查看详情modal  开始-->
<div class="detail_modal modal_define" id="detail_modal">
    <ul>
        <li class="title text-center">
            <div>查看详情</div>
            <img class="modal_close" src="/statics/images/close.png" alt="">
        </li>
        <li>
            <div class="clearfix">
                <div class="pull-left">项目名称：</div>
                <div class="pull-left form_project_name">2号瓷娃娃</div>
            </div>
        </li>
        <li>
            <div class="clearfix">
                <div class="pull-left"><span class="letter_space_2">价</span>值：</div>
                <div class="pull-left form_value">2000积分</div>
            </div>
        </li>
        <li>
            <div class="clearfix">
                <div class="pull-left"><span class="letter_space_2">类</span>型：</div>
                <div class="pull-left form_project_status">普通项目</div>
            </div>
        </li>
    </ul>
</div>
<!--查看详情modal  结束-->

<!--立即消费modal  开始-->
<div class="consume_modal modal_define" id="consume_modal">
    <form action="" method="post" id="consume_modal_form">
        <ul>
            <li class="title text-center">
                <div>立即购买</div>
                <img class="modal_close" src="/statics/images/close.png" alt="">
            </li>
            <li>
                <div class="clearfix">
                    <div class="pull-left">项目名称：</div>
                    <div class="pull-left form_project_name">2号瓷娃娃</div>
                </div>
            </li>
            <li>
                <div class="clearfix">
                    <div class="pull-left"><span class="letter_space_2">价</span>值：</div>
                    <div class="pull-left form_value">2000积分</div>
                </div>
            </li>
            <li>
                <div class="clearfix">
                    <div class="pull-left"><span class="letter_space_2">类</span>型：</div>
                    <div class="pull-left form_project_status">普通项目</div>
                </div>
            </li>
        </ul>
    </form>
    <div class="at_consume text-center">
        <div id="at_consume">立即购买</div>
    </div>
</div>
<!--立即消费modal  结束-->

<!--modal 背景遮罩层-->
<div id="mark"></div>
<!--modal 背景遮罩层-->

<!--购买成功  提示  模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                提交成功！
            </div>
            <div class="modal-footer">
                <div data-dismiss="modal">确定</div>
            </div>
        </div>
    </div>
</div>
<!--购买成功  提示  模态框-->

<!--查看详情modal  提示  模态框-->
<div class="modal fade" id="modal_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <!--项目详情-->
            </div>
            <div class="modal-footer">
                <div data-dismiss="modal" style="color: #157EFB;font-size: 0.4rem;">ok</div>
            </div>
        </div>
    </div>
</div>
<!--查看详情modal  提示  模态框-->

<script src="/statics/js/flexible.js"></script>
<script src="/statics/js/jquery-3.2.1.min.js"></script>
<script src="/statics/js/bootstrap.min.js"></script>
<script src="/statics/js/user_project_list.js"></script>
</body>
</html>